<template>
  <div class="warpper-box invoiceExamine">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline">
        <a-form-item label="开票状态">
          <a-select placeholder="请选择" v-model="params.invoiceStatus" style="width: 160px;">
            <a-select-option key="1">待审核</a-select-option>
            <a-select-option key="2">已开票</a-select-option>
            <a-select-option key="3">已拒绝</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="发票编号">
          <a-input placeholder="请输入发票编号" v-model="params.invoiceId"></a-input>
        </a-form-item>
        <a-form-item label="发票类目">
          <a-select placeholder="请选择" v-model="params.invoiceCategory" style="width: 160px;">
            <a-select-option :key="item.categoryId" v-for="item in invoiceCategoryList">{{ item.categoryName
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
          <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="invoiceId">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record" v-if="params.invoiceStatus !== '0'">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.addInfo.add(record.invoiceId)">详情</a>
          <a-divider type="vertical" />
          <a @click="checkManage(record)">发票管理</a>
          <span v-if="record.invoiceStatus == 1">
            <a-divider type="vertical" />
            <a-popconfirm title="是否审核通过，更新开票申请状态为已开票?" ok-text="通过" cancel-text="拒绝" @confirm="examine(record, 2)"
              @cancel="examine(record, 3)">
              <a>审核</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <!-- 返回||提交 -->
    <div style="height: 60px;"></div>
    <a-card class="footBtn" hoverable :bordered="false">
      <a-button key="back" icon="logout" class="ant-btn-warning" @click="goBack">返回</a-button>
      <!-- <a-button type="primary" icon="file-done" @click="submit" style="margin-left: 10px;">提交</a-button> -->
    </a-card>
    <add-info ref="addInfo" @on-ok="addLoad"></add-info>

    <!-- 导入发票附件 -->
    <a-modal v-model="importVisible" title="导入发票附件" width="540px" :footer="null">
      <a-alert message="支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过200MB" type="info" />
      <a-button type="primary" @click="importInvoice" style="margin: 20px 0 20px;width: 160px;">上传文件</a-button>
      <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel"
        @change="importInvoiceHandle" style="display: none;" />
      <div class="invoiceList">
        <div class="list" v-for="item in invoiceList" :key="item.invoiceFileId">
          <span><a-icon type="file" style="margin-right: 6px;" />{{ item.fileName }}</span>
          <a-icon type="close" style="cursor: pointer;" @click="deteleIncoice(item.invoiceFileId)"/>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  COLUMNS_EXAMINE_DETAIL
} from "./form"
import {
  pageInvoiceCheck,
  listHrInvoiceCategory,
  checkInvoice,
  invoiceFileList,
  invoiceFileAdd,
  invoiceFileDelete
} from "@/api/human/finance"
import {
  uploadNewFile
} from '@/api/manage/base'
import AddInfo from "./invoiceExamineDetail_add.vue"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'invoiceExamineDetail',
  components: {
    AddInfo
  },
  data() {
    return {
      params: {
        invoiceStatus: undefined,
        invoiceId: '',
        invoiceCategory: undefined,
      },
      table: {
        columns: COLUMNS_EXAMINE_DETAIL,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      enterpriseId: "", // 企业id
      enterpriseName: "", // 企业名称
      enterpriseData: [], // 客户列表
      invoiceCategoryList: [], // 发票类目列表
      importVisible: false, // 发票管理弹出层显示
      invoiceList: [], // 发票附件列表

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  activated() {
    this.enterpriseId = this.$route.query.enterpriseId || "";
    this.loadTable(true);
    this.getInvoiceCategoryList();
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows
    },
    // 获取发票附件列表
    async getInvoiceFileList() {
      this.invoiceList = [];
      const { code, data } = await invoiceFileList(this.invoiceId);
      if (code === '1') {
        this.invoiceList = data;
      }
    },
    // 获取发票类目列表
    async getInvoiceCategoryList() {
      const { code, data } = await listHrInvoiceCategory();
      if (code === '1') {
        this.invoiceCategoryList = data;
      }
    },
    // 获取列表
    async loadTable(flag) {
      let params = this.params;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.enterpriseId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await pageInvoiceCheck(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 审核
    async examine(row, type) {
      const { code, data } = await checkInvoice({
        invoiceId: row.invoiceId,
        operateType: type
      });
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 发票管理
    checkManage(row) {
      this.importVisible = true;
      this.invoiceId = row.invoiceId
      this.getInvoiceFileList();
    },
    // 导入表单
    importInvoice() {
      this.$refs.fileExcel.click();
    },
    async importInvoiceHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (!(file.size / 1024 / 1024 < 200)) {
        _this.$message.error('模版大小不能超过 200MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        formData.append("dirName", '财务管理');
        let {
          code,
          data
        } = await uploadNewFile(formData);
        if (code === '1') {
          _this.submitIncoice({
            invoiceId: _this.invoiceId,
            fileParams: [{
              fileUrl: data,
              fileName: file.name
            }]
          })
        }
      }
    },
    // 提交发票附件
    async submitIncoice(params) {
      console.log(params);
      let {
        code,
        data
      } = await invoiceFileAdd(params);
      if (code === '1') {
        this.$message.success('上传成功');
        this.getInvoiceFileList();
      }
    },
    // 删除发票附件
    async deteleIncoice(Id) {
      let {
        code,
        data
      } = await invoiceFileDelete({invoiceFileId:Id});
      if (code === '1') {
        this.$message.success('删除成功');
        this.getInvoiceFileList();
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.params.invoiceId = '';
      this.params.invoiceStatus = undefined;
      this.params.invoiceCategory = undefined;
      this.loadTable(true);
    },
    // 返回
    goBack() {
      this.$router.back();
    }
  }
}
</script>
<style lang="less">
.invoiceList {
  .list {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
}
</style>